<script setup>
import {computed, nextTick, ref, watch} from "vue";
import InsertBtn from "./InsertBtn.vue";
import nodeMixin from "../../NodeMixin.js";

const props = defineProps({
  moveLn: Boolean,
  moveRn: Boolean,
  type: String, //节点类型
  color: String, //节点主题颜色
  headerIcon: String, //头部图标
  content: String, //节点内容
  readonly: Boolean, //是否禁用，不可编辑
  modelValue: Object, //节点名称
  showError: Boolean, //是否显示错误状态
  errorInfo: String, //错误信息
  isDefault: Boolean, //是否为默认节点
  placeholder: {
    default: '请设置'
  },
  desc: String //描述
})
const enableEdit = ref(false)
const nodeNameInput = ref()
const emit = defineEmits([...nodeMixin.emits, 'copy', 'moveL', 'moveR'])
const _value = computed(nodeMixin.computed._value(props, emit))
watch(enableEdit, () => {
  if (enableEdit.value) {
    nextTick(() => {
      nodeNameInput.value.focus()
    })
  }
})
</script>

<template>
  <div class="w-p-node">
    <el-tooltip v-if="showError" effect="dark" :content="errorInfo || '设置错误'" placement="top-start">
      <el-icon size="20" class="w-node-err-tip">
        <WarningFilled/>
      </el-icon>
    </el-tooltip>
    <div :class="{ 'w-p-node-body': true, 'w-node-err': showError }"  v-if="_value.type !='CONDITION'"
      >
      <div class="w-p-node-header" :style="{ 'background-color': _value.name == '业务进件' ? '#4E5569' : _value.name == '延迟等待'?'#EC8151': '#1878FF' }">
        <div>
          <el-icon size="15" v-if="!enableEdit">
            <component :is="headerIcon" />
          </el-icon>
          <div class="w-row-text"  >{{ _value.name }}</div>
        </div>
        <el-icon class="w-node-del" v-if=" !readonly" @click="emit('delete')">
          <Close />
        </el-icon>
      </div>
      <div class="w-p-node-content" @click=" emit('select')">
        <el-text line-clamp="4">{{ _value.props.name || placeholder }}</el-text>
        <el-icon class="w-p-node-click" >
          <ArrowRight />
        </el-icon>
      </div>
    </div>

    <div :class="{'w-p-node-body': true, 'w-node-err': showError}" v-else :style="{'---shadowColor': color}">
      <!-- <div class="w-p-node-move" @click="emit('moveL')">
        <el-icon v-show="!readonly && moveLn && !isDefault">
          <ArrowLeft/>
        </el-icon>
      </div> -->
      <div >
        <div class="w-p-node-header">
          <div :style="{'color': isDefault ? '#4E5569' : color}">
            <el-icon size="15" v-if="!enableEdit">
              <component :is="headerIcon"/>
            </el-icon>
            <div class="w-row-text"  >{{ _value.name }}</div>
          </div>
          <el-icon class="w-node-del" v-if=" !readonly" @click="emit('delete')">
          <Close class="close1" />
        </el-icon>
          <!-- <el-text class="w-node-desc" type="info" size="small">{{ desc }}</el-text> -->
        </div>
        <div class="w-p-node-content d_f j_c_s_b" @click="$emit('select')">
          <el-text line-clamp="4">{{ _value.props.name || placeholder }}</el-text>
          <el-icon class="w-p-node-click" >
          <ArrowRight />
        </el-icon>
        </div>
      </div>
     
    </div>
    <div class="w-p-node-add">
      <insert-btn v-if="!readonly" @insertNode="nd => emit('insertNode', nd)"/>
    </div>
  </div>
</template>

<style scoped lang="scss">

.w-p-node {
  width: 220px;
  margin-bottom: 8px;
  position: relative;

  .w-node-err-tip {
    position: absolute;
    right: -30px;
    color: var(--el-color-danger)
  }

  // .w-p-node-body {
  //   cursor: pointer;
  //   background: white;
  //   overflow: hidden;
  //   border-radius: 5px;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  //   box-shadow: 0 0 5px 0 #d8d8d8;

  //   .w-p-node-move {
  //     width: 15px;

  //     &:hover {
  //       background: #F5F6F6;
  //     }
  //   }

  //   &:hover {
  //     box-shadow: 0 0 5px 0 var(---shadowColor);
  //   }

  //   & > div:first-child, & > div:last-child {
  //     height: 100%;

  //     &:hover {
  //       background: #CACACA;
  //     }
  //   }

  //   .w-p-node-header {
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //     height: 25px;
  //     font-size: 13px;

  //     .w-node-action {
  //       color: #767676;
  //       display: none;

  //       & > * {
  //         margin: 2px;
  //       }
  //     }

  //     .w-node-desc {
  //       position: absolute;
  //       right: 8px;
  //     }

  //     .w-row-text {
  //       &:hover {
  //         text-decoration: underline;
  //       }
  //     }

  //     & > div {
  //       display: flex;
  //       align-items: center;

  //       & > div {
  //         margin-left: 3px;
  //         width: calc(220px - 85px);
  //       }
  //     }

  //     input {
  //       width: calc(220px - 85px);
  //       border: 1px solid #CACACA;
  //       border-radius: 5px;

  //       &:focus {
  //         outline: none;
  //       }
  //     }
  //   }

  //   .w-p-node-content {
  //     padding: 5px;
  //     min-height: 50px;
  //     display: flex;
  //     justify-content: space-between;
  //     align-items: center;
  //     font-size: 15px;
  //     color: #656363;

  //     & > div {
  //       word-wrap: break-word;
  //     }
  //   }

  //   &:hover {
  //     .w-node-action {
  //       display: inline;
  //     }

  //     .w-node-desc {
  //       display: none;
  //     }
  //   }
  // }
  .w-p-node-body {
    cursor: pointer;
    background: white;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 #d8d8d8;

    .w-p-node-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 10px;
      color: white;
      height: 25px;
      font-size: 13px;

      .w-row-text {
        &:hover {
          text-decoration: underline;
        }
      }

      .w-node-del {
        display: none;
      }

      &>div {
        display: flex;
        align-items: center;

        &>div {
          margin-left: 3px;
          width: calc(220px - 50px);
        }
      }

      input {
        width: calc(220px - 50px);
        border: none;
        border-radius: 5px;

        &:focus {
          outline: none;
        }
      }
    }

    .w-p-node-content {
      padding: 5px 5px 5px 15px;
      min-height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 15px;
      color: #656363;

      &>div {
        width: 92%;
        word-wrap: break-word;
      }
    }

    &:hover {
      box-shadow: 0 0 5px 0 var(---shadowColor);

      .w-node-del {
        display: inline;
      }
    }
  }
  .w-p-node-add {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;

    &:before {
      position: absolute;
      content: '';
      width: 2px;
      height: 80px;
      background: #CACACA;
    }

    &:after {
      content: '';
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      border-style: solid;
      border-width: 8px 6px 4px;
      border-color: #CACACA transparent transparent;
    }
  }
}
.close1{
  color: rgb(24, 120, 255);
}
</style>
